<script setup>
import { GetBlogsAll } from "@/apis/allAPI/blog"
import { GetTagsAll } from "@/apis/allAPI/tag"
import Card from "@/components/Card.vue"
import TagChip from "@/components/TagChip.vue"
import TimeLine from "@/components/TimeLine.vue"
import { onMounted, ref } from "vue"
const allLabels = ref([])
const timeLineData = ref({})
import { useRouter } from "vue-router"
const router = useRouter()
onMounted(() => {
  GetTagsAll((rData) => {
    allLabels.value = rData
  })
  GetBlogsAll("archiveBlogs", (rData) => {
    timeLineData.value = rData
  })
})
</script>

<template>
  <Card>
    <div class="tags-wrap">
      <TagChip
        v-for="label in allLabels"
        :index="label.id"
        :label="label.name"
        :show-remove="false"
        @click="router.push('/archive/' + label.name)" />
    </div>

    <TimeLine
      v-for="year in Object.keys(timeLineData).reverse()"
      :key="year"
      :year="year"
      :blogs="timeLineData[year]" />
  </Card>
</template>

<style scoped>
.tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 40px;
}
</style>
